<template>
  <div>
    <div class="search">
      <label>名称</label>
      <a-input style="width:200px;" placeholder="请输入档号" v-model="mingchengs"></a-input>
      <a-button style="margin-left:20px;" @click="dataList" type="primary">查询</a-button>
      <a-button type="primary" @click="preserve">保存</a-button>
    </div>
    <div></div>
    <a-card :bordered="false">
      <a-col :md="6">
        <a-tree show-line @select="onSelect" class="tree">
          <a-icon slot="icon" type="carry-out" />
          <a-tree-node v-for="item in treeData" :key="item.id">
            <a-icon slot="icon" type="carry-out" />
            <span slot="title">{{ item.mingCheng }}</span>
            <a-tree-node v-for="items in item.childList" :key="items.id">
              <a-icon slot="icon" type="carry-out" />
              <span slot="title">{{ items.mingCheng }}</span>
              <a-tree-node v-for="itemss in items.childList" :key="itemss.id">
                <a-icon slot="icon" type="carry-out" />
                <span slot="title">{{ itemss.mingCheng }}</span>
              </a-tree-node>
            </a-tree-node>
          </a-tree-node>
        </a-tree>
      </a-col>
      <a-col :md="18">
        <j-editable-table
          ref="editableTable"
          :loading="loading"
          :columns="columns"
          :dataSource="dataSource"
          style="margin-top: 8px;"
          @valueChange="handleSelectChange"
        ></j-editable-table>
      </a-col>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
import { FormTypes } from '@/utils/JEditableTableUtil'
import { randomUUID } from '@/utils/util'
import JEditableTable from '@/components/jeecg/JEditableTable'
import { metadataList, editMetadataList } from '@/api/api'

export default {
  name: 'DefaultTable',
  components: { JEditableTable },
  data() {
    return {
      loading: false,
      mingchengs: '',
      columns: [
        {
          title: '备注',
          key: 'mingCheng',
          // width: '19%',
          width: '300px',
          disabled: true,
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入${title}',
        },
        {
          title: '字段名称',
          key: 'bianMa',
          // width: '19%',
          width: '300px',
          disabled: true,
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '请输入${title}',
        },
        {
          title: '档号范围',
          key: 'dangHaoFanWei',
          width: '100px',
          type: FormTypes.checkbox,
          disabled: false,
          customValue: ['Y', 'N'], // true ,false
          // defaultChecked: true
        },
      ],
      dataSource: [{ dangHaoFanWei: '' }],
      selectedRowIds: [],
      treeData: [],
      menLeiId: '',
    }
  },

  mounted() {
    this.dataList()
  },
  created() {
    // 门类树
    getAction('/xtMenLei/tree', {}).then((res) => {
      if (res.code == 200) {
        this.treeData = res.result
      }
    })
  },
  methods: {
    //  树操作
    onSelect(selectedKeys, info) {
      this.menLeiId = selectedKeys
      this.dataList()
    },
    // 保存
    preserve() {
      let arr = this.dataSource
      for (var i = 0; i < arr.length; i++) {
        arr[i].dangHaoFanWei = arr[i].dangHaoFanWei == 'Y' ? '1' : '0'
        console.log(arr[i])
      }

      editMetadataList({
        array: arr,
      }).then((res) => {
        if (res.success) {
          this.$message.success('保存成功')
          this.dataList()
        }
      })
    },
    // 当前行值发生改变
    handleSelectChange(val) {
      for (var i = 0; i < this.dataSource.length; i++) {
        if (val.row.id == this.dataSource[i].id) {
          this.dataSource[i] = val.row
        }
      }
      console.log(this.dataSource)
    },

    /* 初始化数据 */
    dataList() {
      let obj = {
        mingCheng: this.mingchengs ? this.mingchengs : '',
      }
      if (this.menLeiId[0]) {
        obj.menLeiId = this.menLeiId[0] ? this.menLeiId[0] : '0'
      } else {
        obj.menLeiId = 0

        if (this.mingchengs) {
          this.$message.warning('请选择门类')
          return
        }
      }
      metadataList(obj).then((res) => {
        if (res.success) {
          let values = []
          for (let i = 0; i < res.result.length; i++) {
            values.push({
              id: res.result[i].id,
              mingCheng: res.result[i].mingCheng,
              bianMa: res.result[i].bianMa,
              ciXu: res.result[i].ciXu,
              dangHaoFanWei: res.result[i].dangHaoFanWei == '0' ? 'N' : 'Y',
            })
          }
          this.dataSource = values
        }
      })
    },
  },
}
</script>

<style scoped>
.search {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 10px;
}
.search .ant-btn:last-child {
  position: absolute;
  right: 20px;
}
.search .ant-input {
  margin-left: 10px;
}
</style>